<template>
	<Modal v-model="modal" class="modal-list-mpnews">
		<Row class="masonry" >
        	<ICol span="24" class="waterfall" v-for="mpnew in mpnews " :key="mpnew.id">
        		<div class="choise" v-on:click="choise(mpnew.id)" v-bind:class="{'clickChoise':mpnew.id==choise_id}">
        			<Icon type="checkmark"></Icon>
        		</div>
        		<CommonMpnews :news="mpnew.news"></CommonMpnews>
        	</ICol>
	    </Row>
        <Row class="mt-25">
            <Page :total="total" @on-change="pageChange" :page-size="param.size"></Page>
        </Row>
        <div slot="footer">
            <IButton type="primary" :disabled="disabled" @click="ok">确定</IButton>
            <IButton @click="cancel">取消</IButton>
        </div>
	</Modal>
</template>
<script>
	import Modal from 'iview/src/components/modal'
	import {Row,Col} from 'iview/src/components/grid'
	import Icon from 'iview/src/components/icon'
    import Page from 'iview/src/components/page'
    import IButton from 'iview/src/components/button'

    import Axios from 'admin/config/axios'

    import CommonMpnews from 'admin/components/common/wechat/mpnews'

    export default {
    	props :{
            callback :{
            	type : Function,
            }
        },
		components:{
            Modal,
            Row,
            'ICol':Col,
            Icon,
            Page,
            IButton,
            CommonMpnews,
        },
        data () {
            return {
                modal: false,
                mpnews : [],
                param :{
                    page : 1,
                    size : 20
                },
                total : 0,
                disabled: true,
                choise_id : 0,
            }
        },
        methods: {
        	//获取图文素材消息
        	getData(){
        		Axios.Wechat.Manager.Material.Mpnews.List(this.param)
                .then(res =>{
                    if(!res) return false;
                    var data = res.data;
                    this.total = data.total;
                    this.mpnews = data.list;
                })
        	},
        	//分页获取
        	pageChange(page){
                this.param.page = page;
                this.getData();
            },
            //选择、取消一个图文
            choise(id){
            	if(this.choise_id==id){
            		this.choise_id= 0;
            		this.disabled = true;
            	}else{
            		this.disabled = false;
            		this.choise_id = id;	
            	}
            },
            //确定
            ok(){
            	this.modal = false;
            	this.callback(this.choise_id);
            },
            //取消
            cancel(){
            	this.modal = false;
            },
            //数据重置
            reset(){
            	this.mpnews = [];
            	this.page = 1;
            	this.size = 10;
            	this.choise_id = 0;
            	this.disabled = true;
            }
        },
        watch:{
        	modal(newVue,oldVue){
                this.reset();
        		if(newVue){
        			this.getData();
        		}
        	}
        }
    }
</script>
<style>
	.modal-list-mpnews .masonry {column-count: 2;column-gap: 0;margin-top: 30px;}
    .modal-list-mpnews .waterfall{box-sizing: border-box;break-inside: avoid;counter-increment: item-counter;padding: 10px;}
	.modal-list-mpnews .waterfall:hover .choise,.clickChoise{position: absolute; background-color: #7f7f7f;left: 0px;top: 0px; width: 100%; height: 100%; background:rgba(0,0,0,0.3); z-index: 2;cursor:pointer;}
	.modal-list-mpnews .choise .ivu-icon{font-size: 36px; color: #ffffff; position: absolute; vertical-align: middle; left: 50%; top: 50%; margin-left: -18px; margin-top: -18px;}
	.modal-list-mpnews .ivu-modal-body{overflow: hidden; height: 500px; overflow-y: scroll;}
</style>